<template>
  <div class="marketplace">
      <div class="land">
        <div class="banner">
          <div class="left">
            <h1>
              <!-- Frontrock Marketplace -->
            </h1>
            <div class="brief">
              Frontrock Marketplace makes it extraordinarily convenient for purchasers around the world to view and purchase fragmented real estate properties.
            </div>
            <div class="buttons videos">
              <a @click="gotoMarketplace()" href="javascript:;" class="start">Get started</a>
              <!-- <a v-show="false" href="javascript:;" class="know-more">Know more</a> -->
            </div>
          </div>
          <div class="video">
              <div class="play"></div>
          </div>
        </div>

        <div class="whatis first">
          <!-- <p class="title">what is frontrock?</p>
          <p class="cont">
            A one stop shop for real estate investment.
            <br>
            <br>
            Frontrock is integrating blockchain technologies to allow purchasing real estate properties a seamless experience and make the opportunities available to the world. Frontrock Marketplace, Frontrock DEX and Frontrock Banking together provides a one stop shop for real estate investment. 
          </p> -->
          <div class="block">
            <div class="interact b1">
              <div class="ico"></div>
              <p class="t">Pegged to NFT</p>
              <p class="c">
                Frontrock Foundation uses smart contract to peg all properties to different NFT tokens, representing the property ownership.
              </p>
            </div>
            <div class="invest b2">
              <div class="ico"></div>
              <p class="t">Fragmented</p>
              <p class="c">
                The property will be fragmented into ERC 20 standard tokens, and the amount of fragmentation will be determined.
              </p>
            </div>
            <div class="bank b3">
              <div class="ico"></div>
              <p class="t">FRK/Property</p>
              <p class="c">
                These property tokens will then be paired with FRK, formulating a new LP pair, and be listed on the Frontrock DEX for exchange.
              </p>
            </div>
            <div class="invest b4">
              <div class="ico"></div>
              <p class="t">Traded on DEX</p>
              <p class="c">
                Users can now purchase fragmented or complete property ownership on the Frontrock DEX.
              </p>
            </div>
          </div>
        </div>

        <div class="bg-key">
            <div class="land2_cloud"></div>
            <span class="l"></span>
            <span class="r"></span>
        </div>

        <h1>
          Real estate investment is as simple as a few clicks
        </h1>
        <div class="brief">
          Frontrock allows you to either invest in fragmented property tokens, or purchase all tokens of the property to gain complate ownership in just a few clicks.
        </div>

        <div class="buttons">
          <a @click="gotoMarketplace()" href="javascript:;" class="start">Get started</a>
          <a v-show="false" href="javascript:;" class="know-more">Know more</a>
        </div>
        <!-- <div class="land_page2_bg">
          <div class="info">
            <p class="t">FrontRock Marketplace</p>
            <p class="cont">Frontrock Marketplace makes it extraordinarily convenient for purchasers around the world to view and purchase fragmented real estate properties.</p>
            <div class="buttons">
              <a href="javascript:;" class="start">Get started</a>
              <a href="javascript:;" class="know-more">Know more</a>
            </div>
          </div>
        </div> -->
        <div class="land_page3_bg">
          <div class="mountain"></div>
          <div class="info">
            <p class="t">Real estate derivative products</p>
            <p class="cont">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p>
            <div class="buttons">
              <a @click="gotoMarketplace()" href="javascript:;" class="start">Get started</a>
              <!-- <a href="javascript:;" class="know-more">Know more</a> -->
            </div>
          </div>
        </div>

        <div class="land_page4_bg">
          <div class="info">
            <p class="t">Hassle-free overseas investments</p>
            <p class="cont">Frontrock makes it possible for investors all over the world to easily invest in overseas properties.</p>
            <div class="buttons">
              <a @click="gotoMarketplace()" href="javascript:;" class="start">Get started</a>
              <!-- <a href="javascript:;" class="know-more">Know more</a> -->
            </div>
          </div>
          <div class="computer"></div>
          <div class="arrow"></div>
        </div>

        <div class="land_page5_bg">
          <div class="arrow"></div>
          <div class="whatis">
            <p class="title">Trade properties on <br> Frontrock DEX
            </p>
            <p class="cont">
              Frontrock DEX is the place where you can buy and sell <br> different property tokens.
            </p>
            <tokens-card></tokens-card>
            
            <div class="buttons">
              <a @click="gotoDex()" href="javascript:;" class="start">Start trading</a>
              <a @click="routePath(3)" href="javascript:;" class="know-more">Know more</a>
            </div>
          </div>
          <!-- <div class="computer"></div> -->
          <!-- <div class="info">
            <p class="t">FrontRock DEX</p>
            <p class="cont">FrontRock DEX provides fragmented investment opportunities for retail investors to invest and own a piece of their dream properties while earning appreciation on these properties.</p>
          </div> -->
        </div>
      </div>
  </div>
</template>

<script>
  import tokensCard from './tokensCard'
  export default {
    data() {
      return {
      }
    },
    components: {
      tokensCard
    },
    mounted() {
        console.log('marketplace:', this)
    },
    methods: {
      routePath(i) {
        Bus.$emit('topbar', i)
      },
      gotoMarketplace(){
        // window.open('../marketplace-demo/index.html')
        Bus.$emit('topbar', 9)
      },
      gotoDex(){
        window.open('../frk-frontend/cryptorio/Dark/trading.html')
      },
      salesBuy() {
        console.log(Date());
      }
    }
  }
</script>

<style scoped="scoped" lang="scss">
  .marketplace {
    position: relative;
    text-align: center;
    // min-height: 400px;
    // max-width: 840px;
    // margin: 50px auto 0 auto;
    color: #fff;
    .land{
      font-family: Newsreader, serif;
      width: 100%;
      display: inline-block;
      .banner{
        display: flex;
        align-items: center;
        justify-content: center;
        @media screen and (max-width: 720px) {
          flex-direction: column;
        }
        .left{
          width: 30%;
          text-align: left;
          h1{
            font-size: 36px;
            font-family: "Krona One", monospace;
            font-weight: 900;
            line-height: 52px;
            background: url(../assets/logo_market.png) no-repeat;
            background-size: auto 100%;
            width: 400px;
            height: 70px;
            margin: 0 0 33px 0;
          }
          @media screen and (max-width: 640px) {
            width: 90%;
            text-align: center;
            h1{
              font-size: 28px;
              line-height: 36px;
              width: 93%;
              display: inline-block;
              margin:70px 0 33px 0;
            }
          }
          .brief{
            font-size: 18px;
            display: inline-block;
            line-height: 22px;
            letter-spacing: 1px;
              @media screen and (max-width: 720px) {
                width: 90%;
              }
          }
          .buttons{
            padding: 40px 0 0 0;
            a{
              width: 240px;
              text-align: center;
            }
          }
        }
        .video{
          background: url(../assets/market_video.jpeg);
          background-size: 100% auto;
          width: 536px;
          height: 358px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          // margin: 64px 0 0 0;
          border-radius: 48px;
          //   flex-direction: row;
          position: relative;
          .play{
              background: url(../assets/video_play.png);
              background-size: 100% auto;
              width:97px;
              height:97px;
              cursor: pointer;
          }
          &:after{
            // content: '';
            position: absolute;
            left: 100px;
            right: 100px;
            bottom: -100px;
            height: 1px;
            background: #fff;
          }
          @media screen and (max-width: 540px) {
            width: 300px;
            height: 200px;
            border-radius: 20px;
            .play{
              transform: scale(.7);
            }
          }
        }
      }

      .whatis{
        // border: 1px dashed white;
        // border-radius: 100px;
        // border-top: 2px solid white;
        margin: 100px 0 50px 0;
        color:#F6F5F5;
        padding: 50px;
        display: inline-block;
        // width: 58%;
        // max-width: 976px;
          @media screen and (max-width: 640px) {
            margin: 100px 0 0 0;
            padding: 50px 50px 20px 50px;
          }
        p{
          margin: 0;
        }
        .title{
          font-size: 42px;
          line-height: 42px;
        }
        .cont{
          width: 80%;
          display: inline-block;
          margin: 40px 0 64px 0;
        }
      &.first{
        .block{
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: space-around;
          @media screen and (max-width: 640px) {
            flex-direction: column;
          }
          >div{
            display: initial;
            // background: rgba(255, 255, 255, 0.13);
            border-radius: 20px;
            width: 17%;
            padding: 40px 15px;
            position: relative;
            @media screen and (max-width: 640px) {
              width: 100%;
            }
            .ico{
              width: 85px;
              height: 85px;
              background: url(../assets/land2_icons.png);
              background-size: auto 100%;
              background-repeat: no-repeat;
              display: inline-block;
            }
            .t{
              font-size: 16px;
              line-height: 25px;
              font-weight: 900;
              font-family: "Krona One", monospace;
              margin: 16px 0 24px 0;
            }
            .c{
              font-size: 15px;
              line-height: 21px;
              font-weight: normal;
              color: #e0e0e0;
            }
            &:after{
              content: '';
                background: url(../assets/land2_icons.png);
                background-size: auto 100%;
                background-position: -613px 0;
                position: absolute;
                width: 50px;
                height: 80px;
                right: -64px;
                top: 44px;
                @media screen and (max-width: 720px) {
                  // right: 95px;
                  right: 42%;
                  bottom: -40px;
                  top:initial;
                  transform: rotate(90deg);
                }
              }
            &.b1{
              .ico{}
              .t{}
              .c{}
            }
            &.b2{
              .ico{
                background-position-x: -73px;
                width: 83px;
              }
              .t{}
              .c{}
            }
            &.b3{
              .ico{
                background-position-x: -147px;
                width: 83px;
              }
              .t{}
              .c{}
            }
            &.b4{
              .ico{
                background-position-x: -227px;
                width: 83px;
              }
              .t{}
              .c{}
              &:after{
                display: none;
              }
            }
          }
        }
        }
      }

      .bg-key{
        position: relative;
        background-image: url(../assets/land2_cloud.png);
        background-repeat: no-repeat;
        // background-size: 77% auto;
        background-size: 68% auto;
        background-position: center bottom;
        width: 100%;
        min-height: 722px;
        @media screen and (max-width: 720px) {
          background-image: url(../assets/key_cloud_m.png);
          min-height: 188px;
          margin: 0 0 50px 0;
          .l, .r{
            display: none;
          }
        }
        .land2_cloud{}
        .l, .r{
          position: absolute;
          width: 43%;
          height: 447px;
          // background-size: 100% auto;
          background-size: 80% auto;
          background-repeat: no-repeat;
          &.l{
            background-image: url(../assets/key_l.png);
            left: 270px;
            top: 240px;
          }
          &.r{
            background-image: url(../assets/key_r.png);
            right: 310px;
            top: -50px;
            width: 29%;
          }
          @media screen and (max-width: 540px) {
            &.l{
              top:initial;
              left: initial;
            }
          &.r{
            right: 210px;
            top:initial
          }
           }
        }
      }

      .land_page2_bg{
        background: url(../assets/land_page2_bg.jpeg) no-repeat;
        background-size: auto 100%;
        height: 800px;
        margin-top: 200px;
        display: flex;
        align-items: center;
        // flex-direction: row;
        color: #070F4E;
        .info{
          width: 363px;
          text-align: left;
          padding: 20px 90px;
          line-height: 48px;
          .t{
            font-size: 48px;
            font-weight: 900;
          }
          .cont{
            line-height: 26px;
            margin: 28px 0 0 0;
          }
          .buttons{
            text-align: center;
            padding: 40px 0;
            white-space: nowrap;
            a{
              // width: 200px;
              width: 45%;
              @media screen and (max-width: 640px) {
                width: 90%;
              }
              &.know-more{
                // border-color: #EF6566;
                border-color: #6271F1;
                color: #6271F1;
                &:hover{
                  // border-color:transparent;
                  // color: #fff;
                }
              }
            }
          }
        }
      }

      .land_page3_bg{
        background: white;
        height: 612px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        // flex-direction: row;
        color: #070F4E;
        @media screen and (max-width: 640px) {
            flex-direction: column;
            padding: 0 0 50px 0;
          }
        .mountain{
          background: url(../assets/land2_estate_mountain.png) no-repeat;
          background-size: auto 100%;
          width: 600px;
          height: 520px;
          margin: -50px 30px 0 30px;
          @media screen and (max-width: 640px) {
            flex-direction: column;
            background-position: center;
            margin: -50px 0px 0 0px;
          }
        }
        .computer{
          background: url(../assets/land_page3_bg.png) no-repeat;
          background-size: auto 100%;
          width: 600px;
          height: 320px;
          margin: 0 0 0 30px;
        }
        .info{
          // width: 363px;
          width: 40%;
          text-align: left;
          padding: 20px 0px;
          line-height: 48px;
          @media screen and (max-width: 640px) {
            width:auto;
            padding: 20px;
          }
          .t{
            font-size: 45px;
            font-weight: 900;
            margin: 0;
          }
          .cont{
            line-height: 26px;
            margin: 23px 0 0 0;
          }
          .buttons{
            display: none;
            padding: 40px 0;
            white-space: nowrap;
            a{
              // width: 200px;
              text-align: center;
              width: 45%;
              @media screen and (max-width: 640px) {
                width: 100%;
              }
              &.know-more{
                border-color: #6271F1;
                color: #6271F1;
                &:hover{
                  // border-color:transparent;
                  // color: #fff;
                }
              }
            }
          }
        }
      }

      .land_page4_bg{
        // background: white;
        height: 800px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        // flex-direction: row;
        // color: #070F4E;
        color: #fff;
        position: relative;
          @media screen and (max-width: 720px) {
            flex-direction: column-reverse;
          }
        .arrow{
          position: absolute;
          background: url(../assets/land_page4_arrow.png) no-repeat;
          background-size: 100% auto;
          width: 180px;
          height: 150px;
          bottom: 80px;
          // right: 585px;
          right: 40%;
          @media screen and (max-width: 720px) {
            background-size: 70% auto;
            bottom: -5%;
          }
        }
        .info{
          width: 390px;
          width: 40%;
          text-align: left;
          padding: 20px 90px;
          line-height: 48px;
          @media screen and (max-width: 720px) {
            width: auto;
            padding: 0px 0px 80px 20px;
          }
          .t{
            font-size: 48px;
            font-weight: 900;
            margin: 0;
          }
          .cont{
            line-height: 26px;
            margin: 23px 0 0 0;
          }
          .buttons{
            display: none;
            padding: 40px 0;
            white-space: nowrap;
            a{
              // width: 200px;
              text-align: center;
              width: 45%;
              @media screen and (max-width: 720px) {
                width: 95%;
              }
              &.know-more{
                border-color: #6271F1;
                color: #6271F1;
                &:hover{
                  // border-color:transparent;
                  // color: #fff;
                }
              }
            }
          }
        }
        .computer{
          background: url(../assets/land_page3_bg.png) no-repeat;
          background-size: auto 100%;
          width: 550px;
          height: 310px;
          // margin: 0 30px 0 0px;
          @media screen and (max-width: 720px) {
            background-size: 100% auto;
            width: 90%;
            height: 240px;
          }
        }
      }

      .land_page5_bg{
        background: white;
        color: #070F4E;
        position: relative;
        border-radius: 118px;
        max-width: 1094px;
        margin-bottom: 100px;
        display: inline-block;
            @media screen and (max-width: 720px) {
              border-radius: 58px;
              margin-top: 50px;
            }
        .arrow{
          position: absolute;
          background:url(../assets/key_r.png) no-repeat;
          background-size: 100% auto;
          width: 200px;
          height: 200px;
          right: 80px;
          top: -40px;
        }
        .whatis{
          color: #070F4E;
          color: inherit;
          width: auto;
          max-width: none;
          margin: 1% 0 0px 0;
          border:none;
            @media screen and (max-width: 720px) {
              padding: 80px 0px;
            }
          .title{
            font-weight: 900;
            @media screen and (max-width: 720px) {
              font-size: 36px;
              line-height: 36px;
            }
          }
          .cont{
            color: #20336B;
            font-size: 18px;
            line-height: 18px;
            margin: 30px 0 50px 0;
          }
          .block{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-evenly;
            
          }
          .buttons{
            padding: 40px 0 0 0;
            width: 50%;
            display: inline-block;
              @media screen and (max-width: 720px) {
                width: 100%;
                margin-bottom: 10px;
              }
            .start, .know-more{
              // width: 180px;
                width: 43%;
                margin: 0 10px;
              @media screen and (max-width: 720px) {
                width:90%;
                margin: 0 0 10px 0;
              }
              &.start{
                border-color: #5BCB93;
                background: #5BCB93;
              }
            }
            .know-more{
              border:1px solid #5BCB93;
              color: #5BCB93;
              &:hover{
                // color: #fff;
                // background: #EF6566;
                // border: 1px solid transparent;
              }
            }
          }
        }
      }

      .buttons{
        // width: 40%;
        padding: 80px 0;
        .start, .know-more{
          width: 240px;
          width: 18%;
          height: 40px;
          line-height: 35px;
          box-sizing: border-box;
          // border: 2px solid #EF6566;
          // border: 2px solid #5BCB93;
          border: 2px solid #6271F1;
          box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.2);
          border-radius: 44px;
          color: white;
          font-family: "Krona One", monospace;
          font-size: 14px;
        //   font-weight: bold;
          text-decoration: none;
          display: inline-block;
          // margin: 0 8px;
          &.start{
            // background: #EF6566;
            // background: #5BCB93;
            background: #6271F1;
            &:hover{
              filter: brightness(1.1);
            }
          }
          &.know-more{
            border:1px solid;
            &:hover{
              // background: #EF6566;
              // border: 1px solid transparent;
              // background: rgba(239, 101, 102, .1);
              background:rgba(91, 203, 147, .1);
            }
          }
            @media screen and (max-width: 640px) {
              width: 90%;
              margin: 0 0 60px 0;
            }
        }
      }
    }
  }

@media only screen and (min-width: 1680px) {
  .order{
    font-size: 16px;
    font-weight: bold;
    color:white;
    position: absolute;
    right: 2%;
    top: 28%;
    .r{
      font-size: 45px;
      em{
        font-size: 20px;
        font-style: normal;
      }
    }
    .btn {
      font-size: 22px;
    }
  }
}
@media only screen and (min-width: 1570px) and (max-width: 1680px) {
  .order{
    font-size: 16px;
    font-weight: bold;
    color:white;
    position: absolute;
    right: 2%;
    top: 28%;
    .r{
      font-size: 45px;
      em{
        font-size: 20px;
        font-style: normal;
      }
    }
    .btn {
      font-size: 22px;
    }
  }
}

@media only screen and (min-width: 1440px) and (max-width: 1570px) {
  .order{
    font-size: 14px;
    font-weight: bold;
    color:white;
    position: absolute;
    right: 3%;
    top: 36%;
    .r{
      font-size: 38px;
      em{
        font-size: 15px;
        font-style: normal;
      }
    }
    .btn {
      font-size: 21px;
    }
  }
}

@media only screen and (max-width: 1440px) {
  .order{
    font-size: 14px;
    font-weight: bold;
    color:white;
    position: absolute;
    right: 2%;
    top: 40%;
    .r{
      font-size: 30px;
      em{
        font-size: 14px;
        font-style: normal;
      }
    }
  }
}

@media only screen and (max-width: 540px) {
  .order {
    font-size: 14px;
    font-weight: bold;
    color:white;
    position: absolute;
    right: 2%;
    top: 0;
    .r {
      font-size: 30px;
      em {
        font-size: 14px;
        font-style: normal;
      }
    }
    .btn {
      font-size: 16px;
      margin-left: 1px;
    }
  }
}

@media only screen and (max-width: 420px) {
  .order {
    top: 4px;
    right: 1.5%;
    a {
      font-size: 16px;
      transform: translateY(-6px);
    }
    .r {
      font-size: 24px;
    }
    .btn {
      padding: 0.18em 0.6em 0.19em;
      font-size: 15px;
    }
  }
}
@media only screen and (max-width: 375px) {
  .order {
    top: 0px;
    right: 1.5%;
    a {
      font-size: 16px;
      transform: translateY(-6px);
    }
    .r {
      font-size: 18px;
    }
    .btn {
      padding: 0.12em 0.3em 0.13em;
      font-size: 15px;
      margin-left: 0;
    }
  }
}

@media only screen and (max-width: 360px) {
  .order {
    top: -1px;
    a {
      font-size: 16px;
      transform: translateY(-6px);
    }
    .r {
      font-size: 18px;
    }
    .btn {
      padding: 0.12em 0.3em 0.13em;
      font-size: 15px;
      margin-left: 0;
    }
  }
}
</style>
